<template>
  <view class="content">
    <!-- 操作栏区域 ，开始 -->
    <!-- <view class="title">
      <view class="title_img">
        <image src="../../static/man_logo.png" style="width: 100%;height: 100%;"></image>
      </view>
      <view class="title_txt">男性用品</view>
    </view> -->
    <view class="jnpeixun">
      <image src="https://zhujinhui.top/ss/zhujinhui/minis/004.jpg" style="width: 750rpx;height: 240rpx;"></image>
    </view>
    <!--
    <view class="kinds">
      <view class="kinds_item" id="isActive00" :class="{ active: isActive00 }" @click="chooseStyle('0')">精选</view>
      <view class="kinds_item" id="isActive01" :class="{ active: isActive01 }" @click="chooseStyle('1')">飞机杯
      </view>
      <view class="kinds_item" id="isActive02" :class="{ active: isActive02 }" @click="chooseStyle('2')">润滑剂
      </view>
      <view class="kinds_item" id="isActive03" :class="{ active: isActive03 }" @click="chooseStyle('3')">避孕套
      </view>
      <view class="kinds_item" id="isActive04" :class="{ active: isActive04 }" @click="chooseStyle('4')">延时喷剂
      </view>
    </view>
    -->

    <!--商品 开始-->
    <view style="display: flex; flex-wrap:wrap;justify-content: space-start; margin-top: 10rpx;">
      <view v-for="(item, index) in goodsList" :key="item.id">
        <view class="goods_item" @click="jumpDetail(item.id)" style="margin-bottom: 20rpx;">
          <view class="img_area">
            <image :src="imgPrex+item.url" style="width: 100%;height: 100%; border-radius: 20rpx;"></image>
          </view>
          <view class="good_name">
            <view class="good_name_img">污师优选</view>
            <view class="good_name_info">{{ item.name }}</view>
          </view>
          <view class="good_price">
            <view class="good_price_num">
              <view style="font-size:20rpx;display: inline;">¥</view>
              {{ item.nowPrice }}
            </view>
            <view class="good_price_desc">{{ item.mai }}人付款</view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <!--文章区域 结束-->
  </view>
</template>

<script>
import config from '../../utils/config.js'
import request from '../../utils/request.js'

export default {
  data() {
    return {
      isActive00: true,
      isActive01: false,
      isActive02: false,
      isActive03: false,
      isActive04: false,
      id: null,
      goodsList: [],
      imgPrex: config.imgPrefx
    }
  },
  created() {
    this.queryListBytype('3');
  },
  onShareAppMessage(res) {
    let pages = getCurrentPages(); //获取当前页面栈的信息
    let currentPage = pages[pages.length - 1]; //获取到当前页面栈中最后一个页面的索引
      if (res.from === 'button') {// 来自页面内分享按钮
        console.log(res.target)
      }
      return {
        title: '逐金污师丨成人情趣甄选好物',
        path: currentPage.route + `?id=${this.id}&share=${this.share}` //后面是路径上要传递的参数
      }
    },
	
  methods: {
    jumpDetail(id) {
      uni.navigateTo({
        url: "/pages/gdetail/gdetail?id=" + id
      })
    },
    chooseStyle(id) {
      //  1. 全部取消
      this.isActive00 = false;
      this.isActive01 = false;
      this.isActive02 = false;
      this.isActive03 = false;
      this.isActive04 = false;

      //  2. 当前点击节点
      const cid = "isActive0" + id;

      if (cid == "isActive00") {
        this.isActive00 = true;
      } else if (cid == "isActive01") {
        this.isActive01 = true;
      } else if (cid == "isActive02") {
        this.isActive02 = true;
      } else if (cid == "isActive03") {
        this.isActive03 = true;
      } else if (cid == "isActive04") {
        this.isActive04 = true;
      }

      // 开始请求
      console.info("二级分类id", id)
      this.queryListBytype(id);

    },
    /**
     *  根据分类查询（一级分类+二级分类）
     */
    queryListBytype(typeTwo) {
      let _this = this;
      // 男性用品分类
      let type = '3';
      request({
        url: '/app/v1/good/list',
        method: "POST",
        data: {
          type: "3"
        },
      }).then(res => {
        if (200 == res.code) {
          // 处理数据
          for (var index in res.data) {
            const aa = res.data[index].name;
            if (aa.length >= 13) {
              res.data[index].name = aa.substring(0, 13) + '...'
            }
          }
          _this.goodsList = res.data;
        } else {
          console.error('查询商品列表失败');
        }
      })
    }
  }
}
</script>
<style>
.title {
  display: flex;
  justify-content: start;
  height: 60rpx;
  /** border: solid 1rpx red; **/
}

.title_img {
  height: 42rpx;
  width: 40rpx;
  /** border: solid 1rpx green;**/
  margin-left: 40rpx;
}

.title_txt {
  /** border: solid 1rpx blue;**/
  height: 60rpx;
  line-height: 60rpx;
  font-size: 36rpx;
  font-weight: 600;
  margin-left: 10rpx;
}

.kinds {
  margin-top: 16rpx;
  height: 100rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /** border: solid 1rpx red; **/
}

.kinds_item {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 100rpx;
  width: 150rpx;
  font-size: 26rpx;
  /** border: solid 1rpx blue; **/
  /** background-color: aquamarine;**/
  margin-left: 4rpx;
  margin-right: 4rpx;
}

/**导航选中样式**/
.active {
  border-bottom: solid 4rpx green;
  background-color: #d3d3d3;
}

/** 每一个商品卡 **/
.goods_item {
  display: flex;
  flex-direction: column;
  justify-content: start;
  height: 480rpx;
  width: 340rpx;
  margin-left: 25rpx;
  margin-top: 12rpx;
  border-radius: 20rpx;
}

/** 商品卡图片 **/
.img_area {
  display: flex;
  flex-direction: column;
  justify-self: center;
  align-items: center;
  background-color: #ededed;
  height: 340rpx;
  width: 340rpx;
  border-radius: 20rpx;
}

/** 商品文字区域 **/
.good_name {
  display: flex;
  align-items: start;
  margin-top: 25rpx;

}

/** 商品tag属性**/
.good_name_img {
  padding-left: 12rpx;
  margin-top: 6rpx;
  width: 160rpx;
  height: 28rpx;
  line-height: 28rpx;
  border-radius: 12rpx;
  background-color: black;
  color: white;
  font-size: 20rpx;
}

/** 商品名称属性**/
.good_name_info {
  width: 400rpx;
  font-size: 32rpx;
  font-weight: 540;
  margin-left: 10rpx;
}

/**价格区域**/
.good_price {
  display: flex;
  margin-top: 10rpx;
}

/**价格区域数字**/
.good_price_num {
  padding-left: 12rpx;
  width: 90rpx;
  height: 34rpx;
  line-height: 34rpx;
  font-size: 34rpx;
  color: red;
}

/**价格区域人数**/
.good_price_desc {
  margin-left: 200rpx;
  width: 200rpx;
  font-size: 24rpx;
  color: #aeaeae;
  margin-left: 10rpx;
}
</style>
